import React from 'react';
import ReactDOM from 'react-dom';

class TabCont extends React.Component {
    constructor(props) {
		super(props);
        this.state = {
            current: 0,
            H: 0
        }
    }
    
    componentDidMount() {
        let H = document.querySelector('.tab-title-wrap').offsetHeight;
        this.setState({H})
    }

    check_title_index(index) {
        return index === this.state.current ? "tab-title active" : "tab-title"
    }

    check_item_index(index) {
        return index == this.state.current ? "tab-item show" : "tab-item"
    }

    handleClick = (index) => {
        this.setState({current: index},()=>{
            this.props.onChange && this.props.onChange(index);
        })
    }
    render() {
        return (
            <div>
                <div className="tab-title-wrap">
                    {
                        React.Children.map(this.props.children, (element, index) => {
                            return (
                                <div className={ this.check_title_index(index) } onClick={()=>this.handleClick(index)}>
                                    <span className="tab-title-text">{element.props.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="tab-item-wrap" style={{"marginTop": this.state.H+"px"}}>
                    {
                        React.Children.map(this.props.children, (element, index) => {
                            return (
                                <div className={ this.check_item_index(index) }>{ element }</div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}

export default TabCont;